<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Re01 编程课开发环境需要下载的工具集合</title>
    <meta
      name="description"
      content="元岛社区 Re01 编程课的开发环境需要下载的工具集合。"
    />
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />
    <style>
      body {
        margin: 0;
      }

      .container {
        min-width: 200px;
        max-width: 780px;
        margin: 0 auto;
        padding: 45px;
        box-sizing: border-box;
        color: rgb(36, 41, 46);
        font-size: 17px;
        line-height: 1.7;
        text-size-adjust: 100%;
      }

      p {
        margin-bottom: 36px;
        overflow-wrap: break-word;
      }

      @media (max-width: 767px) {
        .container {
          padding: 15px;
        }
      }

      .cover {
        width: 100%;
        background-color: #f1f1f1;
        text-align: center;
      }

      .logo {
        height: 80px;
        width: 80px;
        margin: 40px auto;
      }

      a {
        color: #216cd3;
        text-decoration: none;
        border-bottom: 1px dashed;
      }

      footer {
        margin-top: 60px;
        background-color: #f1f1f1;
        text-align: center;
        padding: 40px;
        font-size: 12px;
        color: #666;
      }

      hr {
        margin: 30px auto;
      }
      code {
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    <div class="cover">
      <img class="logo" alt="元岛logo" src="./midlogo.png" />
    </div>
    <article class="container">
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://space.bilibili.com/34786453"
        >
          《Re01：从零开始的编程之路》</a
        >必修部分的开发环境配置(尽量不要用win7，很多编程软件已经不支持win7了)：
      </p>
      <h3>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://www.bilibili.com/video/BV1k34y1Y7xk/"
        >
          视频教程</a
        >
      </h3>
      <hr />
      <h2>浏览器下载地址（任性其一即可）</h2>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://c2rsetup.officeapps.live.com/c2r/downloadEdge.aspx?platform=Default&source=EdgeStablePage&Channel=Stable&language=zh-cn"
          >Edge 浏览器</a
        >（win10 以上用户自带的无需下载，Mac 用户下载Chrome）
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://www.google.cn/chrome/index.html"
          >Chrome 浏览器</a
        >
      </p>
      <hr />
      <h2>云环境：</h2>
      <p>无需下载任何东西，注册后在浏览器中直接使用即可，推荐。</p>
      <p>都是免费的，适用于小白等不会安装环境或电脑配置差的同学使用。</p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://cloudstudio.net/"
          >Cloud Studio (腾讯云)</a
        >
      </p>
      <p>
        注：Cloud Studio
        的免费模式有所调整，每月免费1000分钟，超出后收费1分钟0.1元，如果超出或者担心，可以使用下面的阿里云Cloud
        IDE，目前一直免费。
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://ide.aliyun.com/"
          >Cloud Ide (阿里云)</a
        >
      </p>
      <p>
        注：进去选通用git, 然后源代码库地址填写:
        https://github.com/lovekwc/re01-one.git 技术栈：通用。点进入空间即可。
      </p>
      <p>
        注：亦或者是选node.js
        相册模板，进去后删掉所有文件就行，当然你可以留着看。
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://stackblitz.com/"
          >StackBlitz (国外的一款，需要英语)</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://www.gitpod.io/"
          >GitPod (国外的另一款，需要英语)</a
        >
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://vscode.dev/"
          >VSCode.dev (没有终端)</a
        >
      </p>
      <hr />
      <h2>本地环境需要下载的工具集合：</h2>
      <h3>写代码的软件：VS Code (Visual Studio Code) 国内加速下载地址</h3>
      <p>请根据自己的电脑系统选择不同的 vscode 版本下载。</p>
      <p id="whow">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://support.microsoft.com/zh-cn/windows/32-%E4%BD%8D%E5%92%8C-64-%E4%BD%8D-windows-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94-c6ca9541-8dce-4d48-0415-94a3faa2e13d"
          >如果不知道自己电脑系统类型是32位还是64位，可以点击这里查看方法</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://update.code.visualstudio.com/latest/win32-x64/stable"
          >点击此处下载 <b id="w64">windows 系统 64 位版本</b></a
        >
      </p>
      <p id="w32">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://update.code.visualstudio.com/latest/win32/stable"
          >点击此处下载 <b>windows 系统 32 位版本</b></a
        >
      </p>
      <p id="warm">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://update.code.visualstudio.com/latest/win32-arm64/stable"
          >点击此处下载 <b>windows 系统 arm 版本</b></a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://update.code.visualstudio.com/latest/darwin-universal/stable"
          >点击此处下载 <b>苹果mac 系统版本</b></a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://update.code.visualstudio.com/latest/linux-deb-x64/stable"
          >点击此处下载 <b>Linux deb 版本</b></a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://update.code.visualstudio.com/latest/linux-rpm-x64/stable"
          >点击此处下载 <b>Linux rpm 版本</b></a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://code.visualstudio.com/#"
          >更多版本请前往官网确认</a
        >
      </p>
      <h3>VS Code 插件</h3>
      <p>在 vscode 左边栏插件市场中搜索下列英文名点击安装即可。</p>
      <ul>
        <li>Chinese ：中文界面</li>
        <li>Prettier ：代码美化</li>
        <li>Wisen-Translate ：翻译插件(云环境下没有)</li>
        <li>Live server ：实时预览html(视频中的Live Preview有很多bug，弃用)</li>
        <li>Search/Translate Hero ：搜索跳转和翻译(云环境下没有)</li>
        <li>vscode-icons ：美化图标</li>
        <li>Git History Diff ：后面git教程中出现的插件</li>
        <li>HTMLHint ：检查html文件出错的地方</li>
      </ul>
      <h3>VS Code 配置</h3>
      <p>Auto Save :自动保存，选择afterDelay</p>
      <p>Format On Save :勾选，保存后自动格式化</p>
      <p>Format On Paste :勾选，粘贴时自动格式化</p>
      <p>Default Formatter :选择prettier，默认格式化插件</p>
      <p>Linked Editing :勾选，同时重命名html标签名</p>
      <p>
        Accept Suggestion On Commit Character
        :取消勾选，不再自动补全一些乱七八糟的东西
      </p>
      <p>
        Accept Suggestion On Enter
        :选择off关闭，回车就是应该换行而不是自动补全乱七八糟的代码
      </p>
      <p>Tab Completion :选择on开启，如需自动补全，使用tab键</p>
      <h3>在电脑上运行JavaScript 语言的后端框架：Node.js</h3>
      <p>不要改安装目录，就C盘，不然容易出问题。</p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://npmmirror.com/mirrors/node/v18.7.0/node-v18.7.0-x64.msi"
        >
          windows系统版。下载后一定要重启！在终端验证是node -v
          ，中间有空格的!!!!!!!!!!!!!!!!!!!!!!!</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://registry.npmmirror.com/-/binary/node/v12.9.1/node-v12.9.1-x86.msi"
        >
          win7或32位用户点这里下载v12版本（尽量升级win11
          或用云环境，旧系统有一大堆问题）。</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://npmmirror.com/mirrors/node/v18.7.0/node-v18.7.0.pkg"
        >
          Mac系统版</a
        >
      </p>
      <p>
        在使用node 或npm 的时候，可能会出现提示：<code
          >npm WARN config global `--global`, `--local` are deprecated. Use
          `--location=global` instead.</code
        >
      </p>
      <p>
        在终端执行：<code
          >npx --location=global npm-windows-upgrade --npm-version latest</code
        >
        如有提示process等字样，按y 再回车确认继续执行，就会解决上面这个warn
        警告。
      </p>
      <h3>代码版本管理：Git</h3>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://registry.npmmirror.com/-/binary/git-for-windows/v2.36.1.windows.1/Git-2.36.1-32-bit.exe"
        >
          这是windows 的加速包，下载后安装时一直点下一步就行。</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://registry.npmmirror.com/-/binary/git-for-windows/v2.36.1.windows.1/Git-2.36.1-64-bit.exe"
        >
          git 64位版本。</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://sourceforge.net/projects/git-osx-installer/files/git-2.33.0-intel-universal-mavericks.dmg/download?use_mirror=autoselect"
        >
          git 苹果系统版本，进入后等5秒会自动下载。</a
        >
      </p>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://cowtransfer.com/s/58dddb7abe7f40"
        >
          GithubDesktop 安装包
        </a>
      </p>
      <p>访问Github慢的话请尝试如下几种方法：</p>
      <ul>
        <li>科学上网，你懂的</li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.cnblogs.com/kewei/archive/2021/06/21/14913063.html"
          >
            FastGithub (推荐) </a
          >：
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://cowtransfer.com/s/8857512666204f"
          >
            win10及以上版本，解压后打开FastGithub.UI.exe
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://steampp.net/"
          >
            Steam++ 加速
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://doc.fastgit.org/zh-cn/guide.html"
          >
            FastGit 镜像
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://cowtransfer.com/s/451d04bd15e049"
          >
            SwitchHosts 缓解 </a
          >：这是<a
            target="_blank"
            rel="noopener noreferrer"
            href="https://gitee.com/monkeycc/GitHub520?_from=gitee_search#22-%E8%87%AA%E5%8A%A8%E6%96%B9%E5%BC%8F"
          >
            配置教程
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://cn.bing.com/search?q=github%E5%8A%A0%E9%80%9F%E6%96%B9%E6%B3%95"
          >
            其他方法
          </a>
        </li>
      </ul>

      <h3>对电脑比较懂的同学可以设置 wsl2 Ubuntu 环境</h3>
      <p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://docs.microsoft.com/zh-cn/windows/wsl/about"
        >
          文档
        </a>
      </p>
      <p>不太会的别折腾这个。</p>
      <p>
        有个小坑，注意提前在windows 程序和功能 设置中开启 Hyper-v 全部选项。
      </p>
    </article>
    <footer>
      <p>Copyright © midorg.com</p>
      <a
        style="color: #666"
        href="http://beian.miit.gov.cn/"
        target="_blank"
        rel="noopener noreferrer"
        >沪ICP备19037513号-3</a
      >
      <p></p>
      <a
        style="color: #666"
        href="http://beian.miit.gov.cn/"
        target="_blank"
        rel="noopener noreferrer"
        ><img
          src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"
          alt="anbei"
          style="width: 15px; height: 15px"
        />沪公网安备31011502018962号</a
      >
    </footer>
    <script>
      if (navigator.userAgent.toLowerCase().indexOf("win64") >= 0) {
        document.getElementById("w64").innerText =
          "windows 系统 64 位版本 ( 已检测到你的系统为 64 位版本 )";
      } else if (navigator.userAgent.toLowerCase().indexOf("win32") >= 0) {
        document.getElementById("w32").innerText =
          "windows 系统 32 位版本 ( 检测到你的系统可能是 32 位版本，请前往上面的文档确认后再下载对应版本 )";
      }
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", function () {
          navigator.serviceWorker.register("sw.js");
        });
      }
    </script>
  </body>
</html>
